<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="mt-4" style="margin-bottom: 3%">
        <el-input v-model="period" placeholder="输入入党阶段" class="input-with-select">
          <template #prepend> 搜索 </template>
          <template #append>
            <el-button :icon="Search" @click="searchByPeriod" />
          </template>
        </el-input>
      </div>
      <el-table :data="tableData" border style="width: 100%" fit class="table" show-header>
        <el-table-column v-if="false" prop="_id" label="id" width="300" align="center" />
        <el-table-column prop="upload_date" label="上传时间" width="200" align="center" />
        <el-table-column prop="name" label="入党阶段" width="200" align="center" />
        <el-table-column prop="status" label="审核结果" align="center" width="200" />
        <el-table-column fixed="right" label="审核信息" align="center">
          <template v-slot="scope">
            <el-button
              v-if="scope.row.status != '审核中'"
              link
              type="primary"
              size="large"
              @click="download(scope.row._id)"
              >下载发送文件</el-button
            >
            <el-button
              v-if="scope.row.status != '审核中'"
              link
              type="primary"
              size="large"
              @click="getGuide(scope.row._id)"
              >查看指导信息</el-button
            >
            <el-button
              v-if="scope.row.status != '审核中'"
              link
              type="primary"
              size="large"
              @click="showMessage(scope.row._id)"
              >查看发送信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="messageVisible" title="信息查看" width="70%" center>
        <div v-html="message"></div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="messageVisible = false"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-pagination
        background
        layout="prev, pager, next"
        style="margin-left: 65%; margin-top: 2%"
        small
        :total="total"
        @current-change="handelCurrentChange"
        v-model:current-page="currentPage"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onUnmounted } from 'vue'
  import { getApproval, getApplyInfo } from '@/lafSdkCollection/getApplyInfo'
  import { useUserStore } from '@/store/modules/user'
  import watermark from '@/utils/watermark.js'
  import { getSettingList } from '@/lafSdkCollection/getSetting'
  import { Cloud } from 'laf-client-sdk'
  const APPID = 'su75ks' // Laf 应用 appid
  const cloud = new Cloud({
    baseUrl: `https://${APPID}.laf.run`,
    getAccessToken: () => userStore.token,
  })
  const messageVisible = ref(false)
  const userStore = useUserStore()
  const period = ref('')
  const total = ref(0)
  const currentPage = ref(1)
  const settingPeriod = ref()
  const getSetting = async () => {
    const { period } = await getSettingList()
    settingPeriod.value = period
  }
  //获取当前页数
  const handelCurrentChange = async (nowPage) => {
    //获取当前页码
    currentPage.value = nowPage
    const res = await getApplyInfo(nowPage, 10, userStore._id)
    tableData.value = res.data
  }
  const searchByPeriod = () => {
    if (period.value.length > 0) {
      tableData.value = tableDataCopy.value
      tableData.value = tableData.value.filter((item) => item.name.match(period.value))
    } else {
      tableData.value = tableDataCopy.value
    }
  }
  import { Search } from '@element-plus/icons-vue'
  const tableData = ref([])
  const tableDataCopy = ref([])
  onMounted(async () => {
    await getSetting()
    await getMessage()
    tableDataCopy.value = tableData.value
    setWaterMark()
  })
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
  const message = ref('')
  const getStatus = (status) => {
    if (status == 1) {
      return '审核中'
    } else if (status == 2) {
      return '审核通过'
    } else if (status == 3) {
      return '审核不通过'
    }
  }
  const getMessage = async () => {
    const res = await getApproval(userStore._id)
    for (let i = 0; i < res.data.length; i++) {
      let baseTime = res.data[i].upload_date
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      tableData.value.push({
        _id: res.data[i]._id,
        name: settingPeriod.value[parseInt(res.data[i].name)],
        upload_date: batchDate,
        status: getStatus(res.data[i].status),
        verify_message: res.data[i].verify_message,
        content: res.data[i].content,
      })
    }
  }
  const getGuide = (_id) => {
    messageVisible.value = true
    message.value = tableData.value.filter((element) => element._id == _id)[0].verify_message
  }
  const download = async (_id) => {
    const fileUrl = await cloud.invoke('getDocumentApproval', { _id })
    const link = document.createElement('a')
    link.href = fileUrl
    const n = tableData.value.find((item) => item._id === _id).personName
    const p = tableData.value.find((item) => item._id === _id).name
    const fileName = n + p + '审核文件.docx'
    link.download = fileName // 替换为你要保存的文件名
    link.target = '_blank'
    link.rel = 'noopener noreferrer'
    link.click()
  }

  const showMessage = (_id) => {
    messageVisible.value = true
    message.value = tableData.value.find((item) => item._id == _id).content
  }
</script>
<style scoped lang="scss">
  @import './index';
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
